.content {
  display: flex;
  flex-direction: column;
  height: 100%;
  .head {
    display: flex;
    justify-content: space-between;
    padding: 16px 24px 24px;
  }
  .main {
    flex: 1;
    padding: 0 24px 24px;
    overflow: hidden auto;
  }

  .RollingTable {
    margin-top: 24px;
    :global {
      .ant-table {
        font-size: 12px !important;

        // 实现5px圆角
        background: transparent !important;
        th {
          height: 28px;
          padding: 0 8px !important;
          // background: @disabled-bg !important;
        }
        td {
          height: 28px;
          padding: 0 8px !important;
          // background: @component-background !important;
        }
        .selected {
          td {
            // background: #21323e !important;
          }
        }
        .ant-table-container {
          border-radius: 5px !important;
        }
        th:first-child {
          border-top-left-radius: 5px !important;
        }
        th:last-child {
          border-top-right-radius: 5px !important;
        }
        tr:last-child td:first-child {
          border-bottom-left-radius: 5px !important;
        }
        tr:last-child td:last-child {
          border-bottom-right-radius: 5px !important;
        }
      }
    }
  }

  .chartTitle {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .title {
      margin-right: 16px;
      font-size: 16px;
      line-height: 22px;
    }
    .unit {
      color: #888e95;
      font-size: 12px;
      line-height: 12px;
    }
  }
}
.drawerTitle {
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  img {
    height: 30px;
    margin-right: 8px;
  }
}
.drawerBody {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  padding-top: 0;
  .date {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    color: var(--font-a80);
    font-size: 14px;
  }
  .head {
    display: flex;
    height: 56px;
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 16px;
      &:nth-child(2) {
        flex: 1;
        margin-left: 24px;
        border-bottom: 2px solid #5e92f6;
      }
      &:nth-child(3) {
        flex: 1;
        margin-left: 24px;
        border-bottom: 2px solid #67dcab;
      }
    }
  }
  .body {
    flex: 1;
    overflow: hidden auto;
    .row {
      display: flex;
    }
    .date {
      background: rgba(56, 60, 62, 0.5);
      &:first-child {
        border-radius: 5px 5px 0 0;
      }
      &:last-child {
        border-radius: 0 0 5px 5px;
      }
    }
    .txt {
      flex: 1;
      margin-left: 24px;
      padding: 16px 0;
      overflow: hidden;
      color: var(--font-a60);
      font-size: 12px;
      line-height: 22px;
      word-break: break-all;
      border-bottom: 1px solid var(--bd-a50);
    }
  }
}

html[data-type-color='dark'] {
  .content {
    :global {
      .ant-table {
        background-color: transparent !important;
        th.ant-table-cell {
          padding: 6px 8px;
          font-size: 12px;
          line-height: 16px;
          background-color: #383c3e !important;
        }
        td.ant-table-cell {
          padding: 6px 8px;
          color: #d3d4d4;
          font-size: 12px;
          line-height: 18px;
          background-color: transparent;
          &.ant-table-cell-fix-left {
            background-color: #222629;
          }
        }
      }
    }
    .total {
      :global {
        td.ant-table-cell {
          background-color: #2d3133 !important;
        }
      }
    }
  }
}
